<template>
  <view class="search_container">
    <view class="home_top_bg">
      <view class="top_bgimg" :style="'height:' + topBarHeight + 'px'">
        <view class="top_cont"
          :style="'height:' + tabBarHeight + 'px;margin-top:' + stateBarHeight + 'px'">
          <!-- #ifndef MP-TOUTIAO -->
          <image :src="staticUrl() + '/home/back.png'" alt="" class="back" @click="clickBack">
          </image>
          <!-- #endif -->
          <view class="seach">
            <icon type="search" size="16" class="search" />
            <input v-model="searchContent" :placeholder="placeholder" @input="monitoringSearch"
              @focus="searchFocus" />
            <icon type="clear" size="16" class="clear" @click="clear" v-if="searchContent" />
          </view>
          <text @click="search">搜索</text>
        </view>
      </view>
    </view>

    <!-- 搜索 自动补全 -->
    <view class="automaticCompletion" v-if="completeList.length">
      <view class="item" v-for="(item, index) in completeList" :key="index"
        @click="clickCompletionItem(item)">
        {{ item.keyword }}
      </view>
    </view>

    <!-- 未搜索 -->
    <view v-if="goodsListLength" class="search_page" @touchmove.stop.prevent="() => {}"
      :style="'padding-top:' + topBarHeight + 'px'">
      <!-- 搜素历史 -->
      <view class="search_history">
        <view class="search_history_title">
          <text>搜素历史</text>
          <img class="icon1" :src="staticUrl() + '/home/delete_history.png'" alt=""
            @click="deleteHistory" />
        </view>
        <view class="search_history_item">
          <text v-for="(item, index) in searchContentList" :key="index"
            @click=";(searchContent = item), search()">
            {{ item }}
          </text>
        </view>
      </view>
      <!-- 热词  -->
      <view class="search_hotWords">
        <view>
          <text>搜索热词</text>
          <img class="icon2" :src="staticUrl() + '/home/show_hot_words.png'" alt=""
            @click="hiddenOrShow = !hiddenOrShow" v-if="hiddenOrShow" />
          <img class="icon3" :src="staticUrl() + '/home/hidden_hot_words.png'" alt=""
            @click="hiddenOrShow = !hiddenOrShow" v-else />
        </view>
        <view v-if="hiddenOrShow" class="search_hotWords_item">
          <text v-for="(item, index) in hotWordsList" :key="index" class="singleRowEllipsis"
            @click=";(searchContent = item), search()">
            {{ item }}
          </text>
        </view>
        <view class="search_hotWords_hidden" v-else>当前搜索发现已隐藏</view>
      </view>
    </view>
    <!-- 搜索之后 -->
    <view class="search_result" v-else>
      <view class="title" :style="'top:' + topBarHeight + 'px'">
        <view v-for="(item, index) in goodsListTitle" :key="index"
          :class="item.active ? 'active' : ''" @click="clickActive(item)"
          class="search_result_title">
          <text>{{ item.label }}</text>
          <img :src="staticUrl() + item.img" alt="" v-if="item.img" />
        </view>
      </view>
      <!-- 没有搜到商品 -->
      <view v-if="NotFoundStatus" class="NotFound" @touchmove.stop.prevent="() => {}">
        <text>没有相关商品~</text>
      </view>
      <!-- 搜到 -->
      <view class="allGoods" v-else :class="open ? 'noMovement' : ''"
        :style="'padding-top:' + (topBarHeight + 42) * 2 + 'rpx'">
        <!-- <scroll-view scroll-y style="height:calc(100vh)" @scrolltolower="touchTheBottom"> -->
        <Goods v-for="(item, index) in goodsList" :key="index" :item="item" :goodsId="item.id"
          @unfolding="unfoldingRules">
        </Goods>
        <!-- </scroll-view> -->
        <view class="nononono" v-if="loading"> ~~数据已加载完~~ </view>
      </view>

      <CartsIcon></CartsIcon>
    </view>

    <!-- 按需 筛选页面 -->
    <view class="screen" v-if="open">
      <view class="screen_bg">
        <view class="screen_page">
          <view class="title" :style="
              'height:' +
              (tabBarHeight + stateBarHeight) +
              'px;line-height:' +
              (tabBarHeight + stateBarHeight + stateBarHeight) +
              'px;'
            ">
            <!-- :style="'height:'+tabBarHeight+'px;margin-top:'+stateBarHeight+'px;line-height:'+tabBarHeight+'px;'"> -->

            <!-- #ifdef MP -->
            <image :src="staticUrl() + '/home/close.png'" alt="" @click="open = false"
              :style="'margin:' + (tabBarHeight + stateBarHeight + 26.56) + 'rpx 0 0 31.25rpx'">
            </image>
            <!-- #endif -->
            <!-- #ifndef MP -->
            <image src="@/static/home/close.png" mode="" @click="open = false"
              :style="'margin:' + (tabBarHeight + stateBarHeight + 26.56) + 'rpx 0 0 31.25rpx'">
            </image>
            <!-- #endif -->

            <text>筛选</text>
          </view>
          <view class="content" :style="'margin-top:' + topBarHeight + 'px'">
            <scroll-view scroll-y="true" class="scroll-Y content_content">
              <view v-for="(item, index) in screenPage" :key="index" class="key"
                :class="item.label === '规格' ? 'specification' : ''">
                <view class="label">{{ item.label }}</view>
                <view v-for="(i, ins) in item.values" :key="ins"
                  class="value singleRowEllipsis spec" :class="i.style ? 'value_border' : ''"
                  @click="valueBorder(i)">
                  <text>{{ i.label }}</text>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="footer">
            <text @click="resetScreen"> 重置 </text>
            <text @click="determineScreen"> 确定 </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 活动规则 -->
    <div class="bgc" @click="rule=[]" v-if="rule.length">
      <div class="activityRules" @click.stop="">
        <div class="rulesTitle">
          <h2>活动规则</h2>
          <uni-icons type="closeempty" size="16" color="#8D8D8D" @click="rule=[]"></uni-icons>
        </div>
        <div class="limits">
          <div class="reduction">{{goodsType}}</div>
          <div class="reductionNum">
            <div v-for="(i, j) in rule" :key="j">{{ i }}</div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
import { getManufactor, getSearchList, hotWords, setComplete } from '@/api/home/index.js'
import Goods from '@/components/goods/goods.vue'
import CartsIcon from '@/components/home/cartsIcon.vue'
import dicts from "@/config/dicts.js"


export default {
  components: { Goods, CartsIcon },
  data () {
    return {
      topBarHeight: 0, //状态栏加导航栏高度
      stateBarHeight: 0, //导航栏高度
      tabBarHeight: 50, //状态栏高度
      searchContent: '',
      searchContentList: [],
      hotWordsList: [],
      hiddenOrShow: true,
      goodsListLength: true,
      goodsList: [],
      // 筛选
      screenPage: [],
      // 厂家
      manufactorList: [],
      // 规格
      specificationsList: [],
      // 商城服务
      available: '',
      // 促销
      promotionType: [],
      params: {
        keyword: '',
        pageNumber: 1,
        pageSize: 30
      },
      goodsListTitle: [
        {
          label: '默认',
          active: false
        },
        {
          label: '销量',
          active: false
        },
        {
          label: '价格',
          active: false,
          activeStatus: 0,
          img: '/home/priceSort.png'
        },
        {
          label: '筛选',
          active: false,
          activeStatus: 0,
          img: '/home/shaixuan_img.png'
        }
      ],
      open: false,
      loading: false,
      NotFoundStatus: false,
      pages: 0,
      placeholder: '请输入搜索关键字',
      completeList: [],
      rule: [],
      goodsType: '',
    }
  },
  onLoad (val) {
    hotWords().then(res => {
      if (res.code === 200) {
        this.hotWordsList = res.data
      }
    })
    if (uni.getStorageSync('searchHistory')) {
      this.searchContentList = uni.getStorageSync('searchHistory')
    }
    this.searchContent = val.keyword
    this.placeholder = val.hotWords
    if (val.keyword) {
      this.search()
    }

  },
  onShow () {
    var self = this
    uni.getSystemInfo({
      success: function (res) {
        self.stateBarHeight = res.statusBarHeight
        // #ifdef MP-WEIXIN
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        let paddingSize = menuButtonInfo.top - self.stateBarHeight
        self.tabBarHeight = menuButtonInfo.bottom - self.stateBarHeight + paddingSize
        self.topBarHeight = menuButtonInfo.bottom + paddingSize
        // #endif
        // #ifndef MP
        self.topBarHeight = self.tabBarHeight + self.stateBarHeight
        // #endif
        // #ifdef MP-TOUTIAO
        self.stateBarHeight = 0
        self.topBarHeight = self.tabBarHeight
        // #endif
      }
    })
  },
  // 监听触底
  onReachBottom () {
    if (this.pages > this.params.pageNumber) {
      this.params.pageNumber++
      getSearchList(this.params).then(res => {
        if (res.code === 200) {
          this.goodsListLength = false
          this.goodsList.push(...res.data.records)
          if (res.data.records.length === 0) {
            this.loading = true
          }
          setTimeout(() => {
            this.loading = false
          }, 1000)
        }
      })
    }
  },
  methods: {
    unfoldingRules (e) {
      this.rule = e.rules
      this.goodsType = dicts.goods_promotionType[e.promotionType]
    },
    clickCompletionItem (e) {
      this.searchContent = e.keyword
      this.search()
    },
    monitoringSearch (e) {
      if (!e.detail.value) {
        this.searchContent = ''
        this.params.keyword = ''
        this.goodsListLength = true
        return
      }
      setComplete({
        keyword: e.detail.value,
        size: 5
      }).then(res => {
        if (res.code === 200) {
          this.completeList = res.data
        }
      })
    },
    searchFocus () {
      setComplete({
        keyword: this.searchContent,
        size: 5
      }).then(res => {
        if (res.code === 200) {
          this.completeList = res.data
        }
      })
    },
    // 触底
    touchTheBottom () {
      if (this.pages > this.params.pageNumber) {
        this.params.pageNumber++
        getSearchList(this.params).then(res => {
          if (res.code === 200) {
            this.goodsListLength = false
            this.goodsList.push(...res.data.records)
            if (res.data.records.length === 0) {
              this.loading = true
            }
            setTimeout(() => {
              this.loading = false
            }, 1000)
          }
        })
      }
    },
    clear () {
      this.searchContent = ''
      this.params.keyword = ''
      this.goodsListLength = true
      this.completeList = []
    },
    // 跳转 详情
    clickJumpInfo (val) {
      uni.navigateTo({
        url: '/pages/goodsInfo/index?id=' + val.id
      })
    },
    // 重置筛选 按钮
    resetScreen () {
      this.screenPage.forEach(item => {
        item.values.forEach(i => {
          i.style = false
        })
      })
    },
    // 确认筛选 按钮
    determineScreen () {
      this.screenPage.forEach(item => {
        if (item.key === 'tramedicine') {
          item.values.forEach(i => {
            this.params.tramedicine = i.style
          })
        }
        // available  只看有货
        if (item.key === 'available') {
          item.values.forEach(i => {
            this.params.available = i.style
          })
        }
        // promotionType 促销
        if (item.key === 'promotionType') {
          item.values.forEach(i => {
            if (i.style) this.promotionType.push(i.value)
          })
        }
        // manufacturer 厂家
        if (item.key === 'manufacturer') {
          item.values.forEach(i => {
            if (i.style) this.manufactorList.push(i.value)
          })
        }
        // simpleSpecs 规格
        if (item.key === 'simpleSpecs') {
          item.values.forEach(i => {
            if (i.style) this.specificationsList.push(i.value)
          })
        }
      })
      this.params.promotionType = this.promotionType + ''
      this.params.manufacturer = this.manufactorList + ''
      this.params.simpleSpecs = this.specificationsList + ''

      this.promotionType = []
      this.manufactorList = []
      this.specificationsList = []

      this.open = false
      this.getData()
    },
    // 搜索
    search () {
      if (this.searchContent) {
        if (this.searchContentList.indexOf(this.searchContent) === -1) {
          this.searchContentList.unshift(this.searchContent)
        } else {
          this.searchContentList.splice(this.searchContentList.indexOf(this.searchContent), 1)
          this.searchContentList.unshift(this.searchContent)
        }
        uni.removeStorageSync('searchHistory')
        uni.setStorageSync('searchHistory', this.searchContentList)
      }

      this.params.keyword = this.searchContent ? this.searchContent : this.placeholder

      this.goodsListTitle.forEach(item => {
        item.active = false
        if (item.label === '价格') {
          item.activeStatus = 0
          item.img = '/home/priceSort.png'
        }
        if (item.label === '筛选') {
          item.activeStatus = 0
          item.img = '/home/shaixuan_img.png'
        }
      })
      this.goodsListTitle[0].active = true
      this.goodsList = []
      this.getList()
    },
    // 返回
    clickBack () { uni.navigateBack({ delta: 1 }) },
    // 获取数据 和 筛选数据
    getList () {
      this.NotFoundStatus = false
      getManufactor(this.params).then(res => {
        if (res.code === 200) {
          res.data.forEach(item => {
            item.values.forEach(i => {
              this.$set(i, 'style', false)
            })
          })
          this.screenPage = res.data
        }
      })
      getSearchList(this.params)
        .then(res => {
          if (res.code === 200) {
            this.goodsListLength = false
            this.goodsList = res.data.records
            this.pages = res.data.pages
            if (!res.data.records.length) this.NotFoundStatus = true
          }
        })
        .finally(() => {
          this.completeList = []
        })
    },
    // 获取筛选 goods数据
    getData () {
      getSearchList(this.params).then(res => {
        if (res.code === 200) {
          this.goodsListLength = false
          this.goodsList = res.data.records
        }
      })
    },
    // 点击具体项
    valueBorder (i) { i.style = !i.style },
    // 点击选中
    clickActive (item) {
      if (this.goodsList.length) {
        this.goodsListTitle.forEach(i => {
          i.active = false
          if (item.label !== '价格') {
            if (i.label === '价格') {
              i.img = '/home/priceSort.png'
            }
          }
          if (item.label !== '筛选') {
            if (i.label === '筛选') {
              i.img = '/home/shaixuan_img.png'
            }
          } else if (item.label === '筛选') {
            if (i.label === '筛选') {
              i.img = '/home/shaixuan_select.png'
            }
          }
        })

        item.active = true

        if (item.label === '价格' && item.activeStatus === 0) {
          item.activeStatus = 1
          item.img = '/home/priceSortD.png'
        } else if (item.label === '价格' && item.activeStatus === 1) {
          item.activeStatus = 2
          item.img = '/home/priceSortA.png'
        } else if (item.label === '价格' && item.activeStatus === 2) {
          item.activeStatus = 1
          item.img = '/home/priceSortD.png'
        }

        if (item.label === '默认') {
          this.resetValue()
          this.getList()
        }
        if (item.label === '销量') {
          this.resetValue()
          this.params.sort = 'num'
          this.params.order = 'desc'
          this.getList()
        }
        if (item.label === '价格') {
          this.resetValue()
          if (item.activeStatus === 1) {
            this.params.sort = 'price'
            this.params.order = 'desc'
          } else if (item.activeStatus === 2) {
            this.params.sort = 'price'
            this.params.order = 'asc'
          }
          this.getList()
        }
        if (item.label === '筛选') {
          this.open = true
        }
      }
    },
    // 删除 历史记录
    deleteHistory () {
      this.searchContentList = []
      uni.removeStorageSync('searchHistory')
    },
    // 重置
    resetValue () {
      this.params.sort = ''
      this.params.pageNumber = 1
      this.params.order = ''
      this.params.promotionType = ''
      this.params.manufacturer = ''
      this.params.simpleSpecs = ''
      this.params.available = false
    }
  }
}
</script>

<style lang="scss" scoped>
.search_container {
  .home_top_bg {
    .top_bgimg {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 200;
      background-size: 100%;
      // background: linear-gradient(to right, #2162fc, #46b0fa);
      color: black;
      background: #fff;
      font-size: 32rpx;
    }

    .top_cont {
      display: flex;
      align-items: center;
      padding: 20rpx;
      box-sizing: border-box;
      background: #fff;
    }

    .back {
      // width: 29rpx;
      // height: 45rpx;
      // margin-left: 14rpx;
      width: 20rpx;
      height: 36rpx;
      padding: 0 14rpx;

      ::v-deep > div {
        width: 20rpx;
        height: 36rpx;
      }
    }

    .search {
      position: absolute;
      top: 24%;
      left: 18rpx;
    }

    .clear {
      position: absolute;
      top: 15%;
      right: 14rpx;
      z-index: 100;
      padding: 4rpx 15rpx 10rpx;
    }

    text {
      font-size: 30rpx;
      height: 56rpx;
      line-height: 56rpx;
      padding: 0 20rpx;
    }
  }

  .seach {
    position: relative;
    /* #ifdef MP-WEIXIN */
    width: 50%;
    /* #endif */
    /* #ifndef MP */
    width: 75%;
    /* #endif */
    /* #ifdef MP-TOUTIAO */
    width: 80%;
    /* #endif */

    height: 56rpx;
    margin-left: 20rpx;
    background: #f9f9f9;
    border-radius: 56rpx;

    input {
      height: 56rpx;
      margin: 0 60rpx;
      font-size: 29rpx;
    }
  }

  ::v-deep .uni-easyinput {
    height: 56rpx;
    font-size: 28rpx;
    background-color: #f5f5f5 !important;
    border-radius: 56rpx;
    opacity: 0.6;
    flex: none;

    .uni-easyinput__content,
    .is-focused,
    .is-input-border {
      background: #f5f5f5;
      border-color: none;
      border: none;
      border-radius: 56rpx;
      background-color: #f5f5f5 !important;

      input {
        height: 56rpx !important;
        padding: 0 40rpx 0 60rpx !important;
      }
    }
  }

  .search_page {
    height: 88.8vh;
    // margin-top: 20%;
    // padding-top: 20%;
    background: #f5f5f5;
  }

  .icon1 {
    width: 20rpx;
    height: 30rpx;
    vertical-align: middle;
  }

  .icon2 {
    width: 34rpx;
    height: 20rpx;
    vertical-align: middle;
  }

  .icon3 {
    width: 26rpx;
    height: 10rpx;
    vertical-align: middle;
  }

  .search_history {
    padding: 20rpx 100rpx 10rpx 30rpx;

    .search_history_title {
      display: flex;
      justify-content: space-between;
    }

    .search_history_item {
      > text {
        display: inline-block;
        margin-top: 30rpx;
        margin-right: 50rpx;
        font-size: 26rpx;
        opacity: 0.6;
      }
    }
  }

  .search_hotWords {
    padding: 10rpx 94rpx 10rpx 30rpx;
    margin-top: 40rpx;

    > view {
      display: flex;
      justify-content: space-between;
    }

    .search_hotWords_item {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;

      text {
        margin-top: 50rpx;
        // margin-right: 100rpx;
        width: 50%;
        font-size: 26rpx;
        opacity: 0.6;
      }
    }

    .search_hotWords_hidden {
      display: block;
      font-size: 26rpx;
      opacity: 0.6;
      margin-left: 50%;
      margin-top: 50rpx;
      transform: translateX(-30%);
    }
  }

  .search_result {
    .title {
      position: fixed;
      // top: 10%;
      z-index: 5;
      width: 100%;
      background: #fff;
      display: flex;
      font-size: 26rpx;
      border-top: 1px solid #f5f5f5;

      .search_result_title {
        padding: 30rpx 64rpx;
        display: flex;
        flex-flow: row nowrap;
        position: relative;

        img {
          width: 14rpx;
          height: 24rpx;
          margin-left: 5rpx;
          position: absolute;
          top: 39%;
          left: 66%;
        }
      }

      .active {
        text {
          color: #2871fc;
        }
      }
    }

    .NotFound {
      text {
        display: inline-block;
        margin: 77.8% auto;
        margin-left: 50%;
        transform: translateX(-50%);
      }
    }

    .allGoods {
      // margin-top: 30%;
      padding: 0 0 3% 0;
      background: #f5f5f5;

      .item {
        display: flex;
        background: #fff;
        margin: 16rpx 20rpx;
        padding: 20rpx;
        border-radius: 16rpx;

        .original {
          margin-right: 30rpx;
          img {
            width: 200rpx;
            height: 200rpx;
            margin-left: 20rpx;
            margin-top: 10rpx;
          }
        }

        .info {
          width: 60%;
          margin-top: 10rpx;

          .goodsName {
            font-size: 26rpx;
            margin-bottom: 8rpx;
          }

          .simpleSpecs {
            font-size: 24rpx;
            margin-bottom: 8rpx;
            opacity: 0.6;
          }

          ._icon {
            width: 20rpx;
            height: 20rpx;
            vertical-align: middle;
            margin-right: 10rpx;
          }

          .expirationDate {
            font-size: 24rpx;
            margin-bottom: 6rpx;
            opacity: 0.6;
          }

          .manufacturer {
            font-size: 24rpx;
            opacity: 0.6;
          }

          .activityType {
            text {
              font-size: 22rpx;
              color: #ed1b19;
              border: 1px solid #ed1b19;
              padding: 0 6rpx;
              border-radius: 6rpx;
            }
          }

          .promotionPrice {
            font-size: 28rpx;
            margin-top: 18rpx;
            display: flex;
            justify-content: space-between;

            image {
              width: 36rpx;
              height: 36rpx;
              vertical-align: bottom;
              margin-bottom: 20rpx;
            }

            text {
              font-size: 30rpx;
              color: #ef231b;
            }
          }
        }
      }

      .nononono {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 34rpx;
      }
    }

    .noMovement {
      overflow: hidden;
      position: fixed;
      width: 100%;
      height: 100%;
    }
  }

  .screen {
    overflow-y: scroll;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 200;

    .screen_bg {
      height: 100%;
      background: #fff;
      position: fixed;
      width: 90%;
      top: 0;
      right: 0;
      z-index: 24;
      overflow-y: scroll;
    }

    .screen_page {
      background: #fff;
      overflow-y: scroll;
      width: 100%;
      min-height: 100%;
      position: absolute;
      // top: 0;
      right: 0;
      z-index: 25;

      .title {
        position: fixed;
        width: 100%;
        font-size: 28rpx;
        z-index: 30;
        background-color: #fff;

        image {
          position: absolute;
          width: 29.17rpx;
          height: 29.17rpx;
        }

        text {
          font-size: 33rpx;
          padding-left: 35%;
        }
      }

      .content {
        margin-bottom: 50px;

        .content_content {
          .specification {
            .spec {
              width: 33%;
            }
          }

          .key {
            margin: 40rpx 30rpx;

            .label {
              margin-bottom: 50rpx;
            }
          }

          .value {
            box-sizing: border-box;
            display: inline-block;
            width: 50%;
            font-size: 24rpx;
            background: #f5f5f5;
            padding: 8rpx 40rpx;
            border: 1px solid #f5f5f5;
            border-radius: 24rpx;
            text-align: center;
          }

          .value_border {
            border: 1px solid #2871fc;
          }
        }
      }

      .footer {
        position: fixed;
        width: 90%;
        font-size: 28rpx;
        z-index: 30;
        background-color: #fff;
        bottom: 0;
        display: flex;
        flex-flow: row nowrap;

        text {
          height: 70%;
          width: 50%;
          color: #2871fc;
          text-align: center;
          line-height: 90rpx;
          font-size: 30rpx;
        }

        text:last-child {
          background: #2871fc;
          color: #fff;
        }
      }
    }
  }

  .automaticCompletion {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: calc(100vh - 11.2vh);
    background: #fff;
    padding-top: 11.2vh;

    .item {
      border-bottom: 1rpx solid #f9f9f9;
      line-height: 97.92rpx;
      padding: 0 34.72rpx;
      font-size: 28rpx;
    }

    .item:first-child {
      border-top: 1rpx solid #f9f9f9;
    }
  }

  .bgc {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;

    .activityRules {
      width: 100%;
      height: 462rpx;
      position: fixed;
      bottom: 0;
      right: 0;
      background: #ffffff;

      .rulesTitle {
        position: relative;
        height: 97.22rpx;
        line-height: 97.22rpx;
        text-align: center;
        border-bottom: 1px solid #f9f9f9;

        h2 {
          font-size: 33rpx;
          font-weight: 500;
          color: #000000;
        }

        ::v-deep .uni-icons {
          position: absolute;
          top: 0;
          right: 47.92rpx;
        }
      }

      .limits {
        padding: 58.33rpx 25rpx 0;
        display: flex;
        height: 32rpx;

        .reduction {
          display: inline-block;
          border: 1px solid #ed1b19;
          border-radius: 4rpx;
          font-size: 18rpx;
          font-weight: 400;
          color: #ed1b19;
          line-height: 1;
          padding: 4rpx 8rpx;
          margin-right: 17.36rpx;
        }

        .reductionNum {
          font-size: 25rpx;
          font-weight: 400;
          color: #8d8d8d;

          div {
            margin-bottom: 16rpx;
          }
        }
      }
    }
  }
}
</style>
